<template lang="pug">
  .page
    .lzw-section
      .tab-title
        .font-14(v-for="(item,index) in filterNav" :key="index" @click="filterMethod(index,$event)" :data-status="item.status" :class="tabIndex === index ? 'active' : ''") {{item.txt}}
      .tab-container.pt-20
        .handle-box.clearfix.pr-20.pl-20
          .pull-left
            span.leftText
              | 企业：
              span.text-info.pl-5.pr-5.font-weight {{totalcount}}
              | 家
          .pull-right
            template(v-if="tabIndex === 0")
              Button.mybtn-2(type="info" @click="create").ml-15 新建企业
            //- template(v-else)
              Button.mybtn-2(type="info" @click="pass").ml-15 审核通过
        .pall-20
          Table.beautiful-table(width="100%" stripe :columns="thead" :data="listData" :loading="loading" @on-selection-change="tableSelectChange")
            template(slot-scope="{ row, index }" slot="accumulativeOrder")
              span {{row.vOrder.accumulativeOrder}}
            template(slot-scope="{ row, index }" slot="monthCost")
              span {{row.vOrder.monthCost}}
            template(slot-scope="{ row, index }" slot="accumulativeCost")
              span {{row.vOrder.accumulativeCost}}
            template(slot-scope="{ row, index }" slot="action")
              Button.mr-10(type="text" @click="openStopCooperate(row.id)") 终止合作
              Button(type="text" @click="goToUnionPayServers(row.id)") 数据查看
            .clearfix.pl-20.pr-20(slot="footer")
              Page(:total="totalcount" :current="pageIndex" :page-size="pageSize" @on-change="pageChange" show-total)
    Modal(v-model="stopCooperateModalShow" title="终止合作" :loading="loading")
      Row(type="flex" justify="start" align="middle")
        Col(span="6")
          span.red.mr-5 *
          span 终止合作原因：
        Col(span="18")
          Input(v-model="stopCooperateReason" type="text" style="width:100%" clearable)
      template(slot="footer")
        Button(@click="stopCooperateModalShow = false") 取消
        Button(type="info" :loading="adjustLoading" @click="stopCooperateOk") 确定
    createModal(ref="createModal" :superCompanyId_arr="listData" :areaArr="areaArr" @get-list="getListData")
</template>

<script>
import enterpriseMixin from './enterpriseMixin.js'
import createModal from './modal/create.vue'
import checkModal from './modal/check.vue'
import dataApi from '@/api/data.js'

export default {
  name: 'v_enterprise',
  components: {
    createModal,
    checkModal
  },
  data () {
    return {
      stopCooperateModalShow: false,
      stopCooperateReason: '',
      adjustLoading: false,
      handleId: '',
      areaArr: [],
      tabIndex: 0,
      cooperateStatus: '1',
      filterNav: [
        {
          txt: '正常合作',
          status: '1'
        },
        {
          txt: '终止合作',
          status: '2'
        }
      ],
      thead: [],
      listData: [],
      ids: [],
      loading: false,
      totalcount: 0,
      pageIndex: 1,
      pageSize: 10
    }
  },
  mixins: [enterpriseMixin],
  created () {
    let thead_extend = ['selection', 'name', 'code', 'accumulativeOrder', 'monthCost', 'accumulativeCost', 'action']
    this.thead = this.getTableColumns(thead_extend)
    this.getListData()
    this.getProvince()
  },
  methods: {
    // 终止合作模态窗
    openStopCooperate (id) {
      this.stopCooperateModalShow = true
      this.handleId = id
      console.log(id)
    },
    stopCooperateOk () {
      if (this.stopCooperateReason) {
        this.adjustLoading = true
        dataApi.postTerminateContract({
          CustomerIds: this.handleId,
          Reason: this.stopCooperateReason
        }).then((res) => {
          this.adjustLoading = false
          if (res.data.success) {
            this.stopCooperateModalShow = false
            this.$Message.success('操作成功！')
            this.stopCooperateReason = ''
            this.getListData()
          } else {
            
            this.$Message.error({
              content: res.data.message,
              duration: 10,
              closable: true
            })
          }
        })
      } else {
        this.$Message.error('请填写终止合作原因')
      }
    },
    filterMethod (index, e) {
      console.log(index)
      this.tabIndex = index
      this.cooperateStatus = e.target.dataset.status
      if (index) {
        let thead_extend = ['selection', 'name', 'code', 'accumulativeOrder', 'monthCost', 'accumulativeCost']
        this.thead = this.getTableColumns(thead_extend)
      } else {
        let thead_extend = ['selection', 'name', 'code', 'accumulativeOrder', 'monthCost', 'accumulativeCost', 'action']
        this.thead = this.getTableColumns(thead_extend)
      }
      this.getListData()
    },
    // 获取零工企业
    getListData () {
      dataApi.postCustomerList({
        ContractWillBeExpiredMonths: '',
        Name: '',
        CooperateStatus: this.cooperateStatus,
        CooperateType: '',
        CityId: '',
        ServerId: '',
        PageIndex: this.pageIndex,
        PageSize: this.pageSize,
        DataSource: 1,
        QueryVOrder: true
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          this.listData = res.data.data
          this.totalcount = res.data.totalRows
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    tableSelectChange (val) {
      console.log(val)
      this.ids = val.map(item => {
        return item.id
      })
    },
    pageChange (index) {
      this.pageIndex = index
      this.getListData()
    },
    checkInfo () {
      console.log()
    },
    create () {
      this.$refs.createModal.creatOpen()
    },
    pass () {
      if (this.ids.length > 0) {
        this.$Message.success('成功')
      } else {
        this.$Message.warning('请选择需要通过审核的企业')
      }
    },
    getProvince () {
      dataApi.getProvince().then(res => {
        this.areaArr = res.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id,
            children: [],
            loading: false
          }
        })
      })
    },

    // 去往银联通客服导入页面
    goToUnionPayServers (id) {
      this.$router.push({
        path: '/unionPayServers',
        name: 'unionPayServers',
        query: {
          customerId: id
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
  span.red{
    color: #ed4014;
  }
</style>
